<template>
  <screenContainer>
    <div class="board-box ant-board">
      <div class="__search">
        <DatePicker :allowClear="false" v-model:value="searchParam.date" :getPopupContainer="getPopupContainer" />
        <div class="__project-name">
          <Select allowClear :max-tag-text-length="100" :max-tag-count="3" :getPopupContainer="getPopupContainer"
            style="width: 100%" v-model:value="searchParam.project" mode="multiple" placeholder="请选择项目"
            :options="projectList">
          </Select>
        </div>
      </div>
      <div class="__table">
        <Table :columns="columns" :data-source="tableData" bordered size="middle" :rowClassName="tableRowClass"
          :pagination="false" :scroll="{ x: 'calc(700px + 50%)', y: height }" />
      </div>
    </div>
  </screenContainer>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, watch, computed } from 'vue';
import screenContainer from '../compNew/boadrContainer.vue';
import { DatePicker, Select, Space, Table } from 'ant-design-vue';
import useColumns from "./columns";
import * as API from '@/api/dataBoard';
import dayjs from 'dayjs';

let fullDom = '.page-box';
let isMobile = false;
const height = ref(400)
let projectList = ref([])
let searchParam = reactive({
  date: '',
  project: []
});
const columns = computed(() => {
  const _date = searchParam.date;
  if (!_date) {
    return [];
  }
  const month = dayjs(_date).month() + 1;
  const next = dayjs(_date).add(1, 'month').month() + 1;
  const next2 = dayjs(_date).add(2, 'month').month() + 1;
  const next3 = dayjs(_date).add(3, 'month').month() + 1;
  return [
    {
      title: '项目名称',
      dataIndex: 'projectName',
      key: 'projectName',
      width: 100,
      fixed: 'left',
    }, {
      title: '销售计划',
      children: [
        {
          title: `${month}-月剩余`,
          dataIndex: 'salesPlanCurMonth',
          key: 'salesPlanCurMonth',
          width: 100,
        }, {
          title: `${next}月`,
          dataIndex: 'salesPlanCurAddOne',
          key: '1',
          width: 100,
        }, {
          title: `${next2}月`,
          dataIndex: 'salesPlanCurAddTwo',
          key: '2',
          width: 100,
        }, {
          title: `${next3}月`,
          dataIndex: 'salesPlanCurAddThree',
          key: '3',
          width: 100,
        }, {
          title: '合计',
          dataIndex: 'salesPlanTotal',
          key: 'salesPlanTotal',
          width: 100,
        },
      ]
    }, {
      title: '成品库存',
      dataIndex: 'finishedInventory',
      key: 'finishedInventory',
      width: 100,
    }, {
      title: '原料库存',
      dataIndex: 'materialInventory',
      key: 'materialInventory',
      width: 100,
    }, {
      title: '库存合计',
      dataIndex: 'inventoryTotal',
      key: 'inventoryTotal',
      width: 100,
    }, {
      title: '库存可发货日',
      dataIndex: 'inventoryDeliveryDate',
      key: 'inventoryDeliveryDate',
      width: 100,
    }, {
      title: '已采购原料',
      children: [
        {
          title: `${month}月`,
          dataIndex: 'purchasedMaterialCurMonth',
          key: 'purchasedMaterialCurMonth',
          width: 100,
        }, {
          title: `${next}月`,
          dataIndex: 'purchasedMaterialCurAddOne',
          key: 'purchasedMaterialCurAddOne',
          width: 100,
        }, {
          title: `${next2}月`,
          dataIndex: 'purchasedMaterialCurAddTwo',
          key: 'purchasedMaterialCurAddTwo',
          width: 100,
        }, {
          title: `${next3}月`,
          dataIndex: 'purchasedMaterialCurAddThree',
          key: 'purchasedMaterialCurAddThree',
          width: 100,
        }, {
          title: '合计',
          dataIndex: 'total',
          key: 'total',
          width: 100,
        },
      ]
    }, {
      title: '可发货节点',
      dataIndex: 'shippingDate',
      key: 'shippingDate',
      width: 100,
    }]
})
let tableData = ref([])
const loading = ref(true);
const getProjectList = async (date) => {
  const res = await API.getPSTProjectList({
    date: date
  });
  if (res) {
    projectList.value = res.map((item) => {
      return {
        label: item.projectName,
        value: item.projectNo
      }
    })
  }
}
watch(() => searchParam.date, () => {
  if (searchParam.date) {
    getProjectList(searchParam.date.format('YYYY-MM-DD'))
  }
  
});
const getList = async () => {
  const res = await API.getPSTList({
    date: dayjs(searchParam.date).format('YYYY-MM-DD'),
    projectCodeList: searchParam.project
  });
  if (res) {
    tableData.value = res;
  }
}
const tableRowClass = (record, index) => {
  if (index % 2 === 0) {
    return 'table-even'
  } else {
    return 'table-odd'
  }
}
const getPopupContainer = () => {
  return document.querySelector('.ant-board');
}
setTimeout(() => {
  loading.value = false;
}, 1500);
watch([searchParam], () => {
  if (searchParam.date) {
    getList();
  }

})
onMounted(async () => {
  searchParam.date = dayjs();
  height.value = document.body.clientHeight - 380;
});
</script>
<style lang="less" scoped>
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.board-box {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;

  .__search {
    display: flex;

    .__project-name {
      width: 360px;
      margin-left: 20px;
    }
  }

  .__table {
    margin-top: 20px;
  }
}
</style>
